<template>
  <div class="container"></div>
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="name" @keyup.enter="handlerKeyup" />
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useStore from '../store'
const name = ref('')
const { main } = useStore()
const { addTodo } = main

function handlerKeyup() {
  if (name.value.trim() === '') {
    return alert('任务不能为空')
  }
  addTodo(name.value)
  name.value = ''
}

</script>

<style scoped lang="less">

</style>
